<template>
	<cl-drawer
		ref="drawer"
		:props="{
			title: `${editing ? '修改' : '新增'}权限组`,
			size: '50%'
		}"
		show-confirm
		confirm-text="提交"
		@close="reset"
		@confirm="submit"
		:saving="saving"
	>
		<el-form ref="form" label-position="top" :disabled="saving" :model="form" :rules="rules">
			<el-form-item label="基本信息">
				<el-card shadow="never">
					<el-row :gutter="20">
						<el-col :span="12">
							<el-form-item label="所属事业部" prop="biz_id">
								<cl-select
									v-model="form.biz_id"
									style="width: 100%"
									placeholder="请选择事业部"
									filterable
									:disabled="editing"
								>
									<el-option
										v-for="item in bizList"
										:key="item.biz_id"
										:label="item.biz_name"
										:value="item.biz_id"
									/>
								</cl-select>
							</el-form-item>
						</el-col>
						<el-col :span="12">
							<el-form-item label="权限名称" prop="ro_name">
								<el-input v-model="form.ro_name" placeholder="请填写权限名称" />
							</el-form-item>
						</el-col>
						<el-col :span="12">
							<el-form-item label="是否技师" prop="is_teacher">
								<cl-select
									v-model="form.is_teacher"
									style="width: 100%"
									placeholder="请选择是否技师"
								>
									<el-option label="是" :value="1" />
									<el-option label="否" :value="0" />
								</cl-select>
							</el-form-item>
						</el-col>
						<el-col :span="12">
							<el-form-item label="角色" prop="role_type">
								<cl-select
									v-model="form.role_type"
									filterable
									placeholder="请选择角色"
									style="width: 100%"
								>
									<el-option
										v-for="item in roleList"
										:key="item.value"
										:label="item.label"
										:value="item.value"
									/>
								</cl-select>
							</el-form-item>
						</el-col>
						<el-col :span="12">
							<el-form-item label="描述" prop="ro_desc">
								<el-input
									type="textarea"
									:autosize="{ minRows: 2, maxRows: 4 }"
									placeholder="请输入描述"
									v-model="form.ro_desc"
								/>
							</el-form-item>
						</el-col>
					</el-row>
				</el-card>
			</el-form-item>
			<el-form-item label="配置权限">
				<el-card shadow="never" body-style="padding:0">
					<el-form-item class="plr-2 pt-2" prop="is_assign">
						<el-radio-group v-model="form.is_assign" @change="treeExpand">
							<el-radio :label="0">全部</el-radio>
							<el-radio :label="1">指定</el-radio>
						</el-radio-group>
					</el-form-item>
					<transition name="fade" mode="out-in">
						<el-tabs v-model="currTab" v-if="form.is_assign">
							<!-- :required="form.is_assign == 1" -->
							<!-- prop="tree" -->
							<el-tab-pane label="pc端" name="pc">
								<el-form-item class="pa-1">
									<el-tree
										ref="tree_pc"
										class="el-tree"
										:data="rulePcList"
										:props="defaultProps"
										:default-checked-keys="form.tree_pc"
										node-key="rule_id"
										show-checkbox
										highlight-current
										:render-content="renderContent"
										@node-expand="treeExpand"
										@check="(data, node) => treeCheckChange('pc', data, node)"
									/>
									<input type="hidden" v-model="form.tree_pc" />
								</el-form-item>
							</el-tab-pane>
							<el-tab-pane label="移动端" name="app">
								<el-form-item class="pa-1">
									<el-tree
										ref="tree_app"
										class="el-tree"
										:data="ruleAppList"
										:props="defaultProps"
										:default-checked-keys="form.tree_app"
										node-key="rule_id"
										show-checkbox
										highlight-current
										:render-content="renderContent"
										@node-expand="treeExpand"
										@check="(data, node) => treeCheckChange('app', data, node)"
									/>
									<input type="hidden" v-model="form.tree_app" />
								</el-form-item>
							</el-tab-pane>
						</el-tabs>
					</transition>
				</el-card>
			</el-form-item>
		</el-form>
	</cl-drawer>
</template>
<script>
import { addClass } from "@/utils";
export default {
	name: "auth-group-form",
	data() {
		return {
			form: {
				ro_id: "",
				ro_name: "",
				biz_id: "",
				is_teacher: 0, //是否技师
				role_type: 0,
				ro_desc: "",
				is_assign: 0,
				tree_pc: [],
				tree_app: [],
				status: ""
			},
			rules: {
				ro_name: [{ required: true, message: "请填写权限名称" }],
				biz_id: [{ required: true, message: "请选择所属事业部" }],
				tree_pc: [{ required: true, message: "请选择pc端规则" }],
				tree_app: [{ required: true, message: "请选择移动端规则" }]
			},
			currTab: "pc",
			saving: false,
			editing: false,
			roleList: [{ label: "其他", value: 0 }],
			rulePcList: [],
			ruleAppList: [],
			defaultProps: {
				children: "sub",
				label: "rule_name"
			},
			show: false
		};
	},

	created() {
		this.form.biz_id = this.getCurrBiz(true);
		this.getRoleList();
		this.getRuleList();
	},
	methods: {
		open(editing = false, data = {}) {
			this.editing = editing;
			this.$refs.drawer.create(() => {
				this.reset();
				this.show = true;
				if (!editing) return;
				Object.keys(this.form).forEach(key => {
					data[key] != undefined && (this.form[key] = data[key]);
				});

				const { permission, permission_app } = data;
				let is_assign = data.permission == "*" || data.permission == "NaN" ? 0 : 1;
				this.form.is_assign = is_assign;
				if (is_assign) {
					this.form.tree_pc = (permission || "")
						.split(",")
						.map(Number)
						.filter(Boolean);
					this.form.tree_app = (permission_app || "")
						.split(",")
						.map(Number)
						.filter(Boolean);
				}
			});
		},

		close() {
			this.$refs.drawer.close();
		},
		reset() {
			this.show = false;
			this.saving = false;
			this.form = {
				ro_id: "",
				ro_name: "",
				biz_id: this.getCurrBiz(true),
				is_teacher: 0, //是否技师
				role_type: 0,
				ro_desc: "",
				is_assign: 0,
				tree_pc: [],
				tree_app: [],
				status: ""
			};
			this.currTab = "pc";
			this.$refs.tree_pc && this.$refs.tree_pc.setCheckedKeys([]);
			this.$refs.tree_app && this.$refs.tree_app.setCheckedKeys([]);
			this.$refs.form.resetFields();
		},
		submit() {
			this.$refs.form.validate(async (valid, errors) => {
				this.showFormErr(errors);
				if (!valid) return;
				if (this.form.is_assign) {
					if (!this.form.tree_pc.length && !this.form.tree_app.length) {
						this.$message.warning("请选择pc端规则或移动端规则");
						return;
					}
				}
				this.saving = true;
				const { editing } = this;
				const { tree_pc, tree_app, is_assign, biz_id, ...args } = this.form;
				let form = {
					...args,
					biz_id,
					permission: is_assign ? tree_pc.join() : "*",
					permission_app: is_assign ? tree_app.join() : "*"
				};
				await this.$service.role[editing ? "update" : "add"](form).done(() => {
					this.saving = false;
				});
				this.$message.success("操作成功");
				this.$emit("confirm", biz_id, !editing);
				this.close();
			});
		},
		// 获取角色
		async getRoleList() {
			const data = await this.$service.public.roleList();

			let roleList = Object.entries(data || {}).map(([k, v]) => {
				return { label: v, value: Number(k) };
			});
			this.roleList = [{ label: "其他", value: 0 }, ...roleList];
		},
		// 权限组列表
		async getRuleList() {
			const { pc = [], app = [] } = await this.$service.rule.list();
			this.rulePcList = pc;
			this.ruleAppList = app;
			this.treeExpand();
		},
		//树节点的内容区的渲染 Function
		renderContent(h, { node }) {
			let classname = "";
			// 由于项目中有三级菜单也有四级级菜单，就要在此做出判断
			if (node.level === 4) {
				classname = "foo ellipsis";
			}
			if (node.level === 3 && node.childNodes.length === 0) {
				classname = "foo ellipsis";
			}
			if (node.level === 2 && node.childNodes.length === 0) {
				classname = "foo ellipsis";
			}
			return h("p", { class: classname }, node.label);
		},
		treeExpand() {
			this.$nextTick(() => {
				this.changeCss();
			});
		},
		//点击修改添加样式
		changeCss() {
			let levelName = document.getElementsByClassName("foo"); // levelname是上面的最底层节点的名字
			for (var i = 0; i < levelName.length; i++) {
				// cssFloat 兼容 ie6-8  styleFloat 兼容ie9及标准浏览器
				// levelName[i].parentNode.style.cssFloat = "left"; // 最底层的节点，包括多选框和名字都让他左浮动
				// levelName[i].parentNode.style.styleFloat = "left";
				let ele = levelName[i].parentNode;
				addClass(ele, "need-float");
				addClass(ele.parentNode, "need-float-parent");
			}
		},
		treeCheckChange(type, data, { checkedKeys }) {
			let key = "tree_" + type;
			this.form[key] = checkedKeys;
			this.$refs.form.validateField(key);
		}
	}
};
</script>
<style lang="scss" scoped>
::v-deep {
	.el-tabs__header {
		margin: 0;
	}
	.el-tabs__nav-wrap::after {
		height: 1px;
	}
	.el-tabs--top .el-tabs__item.is-top:nth-child(2),
	.el-tabs--top .el-tabs__item.is-bottom:nth-child(2) {
		padding-left: 20px;
	}

	.el-tree-node__content::before {
		content: "";
		padding-left: 10px;
	}

	.el-tree {
		.el-checkbox {
			margin-right: 6px;
		}
		.need-float {
			// float: left;
			// width: 25%;
			background-color: #fff !important;
		}
		&-node__children {
			word-break: break-all;
			// display: flex;
		}
	}
}
</style>
